var pos = 0; //序号标志
var totalSlides = $("#slider-wrap>ul>li").length; //图片总数
var sliderWidth = $("#slider-wrap").width(); //滚动长度
var flag = 1; //动画完成标记
$(document).ready(function () {
  $("#slider-wrap ul#slider").width(sliderWidth * totalSlides); //设定滚动盒子的总长度=单个图片长度*图片总个数
  $("#next").click(function () {
    if (flag) {
      slideRight();
    } //击“下一页”按钮执行向左滚动函数
  });
  $("#previous").click(function () {
    if (flag) {
      slideLeft();
    } //击“上一页”按钮执行向右滚动函数
  });
  var autoSlider = setInterval(slideRight, 3000); //设定计时器，每3秒执行一次向左滚动函数，轮播图自动播放
  $.each($("#slider-wrap>ul>li"), function () {
    var li = document.createElement("li");
    $("#pagination-wrap ul").append(li); //添加页码
  });
  countSlides(); //执行显示标题函数
  pagination(); //执行页码跳动函数
  $("#slider-wrap").hover(
    function () {
      $(this).addClass("active");
      clearInterval(autoSlider); //鼠标进入轮播图范围时清除计时器停止自动播放
    },
    function () {
      $(this).removeClass("active");
      autoSlider = setInterval(slideRight, 3000); //鼠标离开时轮播图范围时重设计时器，轮播图继续自动播放
    }
  );
});
// 向右滚动函数
function slideLeft() {
  flag = 0;
  pos--; //当前序号自减1
  if (pos == -1) {
    pos = totalSlides - 1;
  } //当前序号为-1时，序号值变为最大值=总的图片数-1
  $("#slider-wrap ul#slider").animate(
    { left: -(sliderWidth * pos) },
    "slow",
    function () {
      flag = 1;
    }
  ); //使用animate方法控制left属性使图片盒子向右移动，移动到图片宽度*序号的置位上
  countSlides(); //执行显示标题函数
  pagination(); //执行页码跳动函数
}
// 向左滚动函数
function slideRight() {
  flag = 0;
  pos++; //当前序号自加1
  if (pos == totalSlides) {
    pos = 0;
  } //当前序号等于图片总数时，序号值变为最小值0
  $("#slider-wrap ul#slider").animate(
    { left: -(sliderWidth * pos) },
    "slow",
    function () {
      flag = 1;
    }
  ); //使用animate方法控制left属性使图片盒子向右移动，移动到图片宽度*序号的置位上
  countSlides(); //执行显示标题函数
  pagination(); //执行页码跳动函数
}
//显示标题函数
function countSlides() {
  $(".titlelist>li").eq(pos).show().siblings().hide(); //让与序号与当前POS相同的标题显示，其它标题隐藏
}
//圆点样式切换函数
function pagination() {
  $("#pagination-wrap ul li").removeClass("active"); //让圆点变小
  $("#pagination-wrap ul li:eq(" + pos + ")").addClass("active"); //让与序号与当前POS相同的页码变大
}
